<template>
  <div class="login-wrap">
    <div class="loginbox">
      <div class="loginbox-logo">
        <img src="../assets/images/login-logo.png">
      </div>
      <div class="loginmain">
        <div class="loginmain_m">
          <div class="loginmain_t">
            <div class="loginmain_title">登录</div>
            <div class="loginmain_r">
              <a href="javascript:;" class="gray">注册账号 ></a>
            </div>
            <div class="clear"></div>
            <div class="loginmain_b"></div>
          </div>
          <div class="logind">
             <el-form :model="param" :rules="rules" ref="login" label-width="0px" class="demo-ruleForm">
                <el-form-item prop="username">
                    <el-input v-model="param.username" placeholder="用户名"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" placeholder="密码" v-model="param.password"></el-input>
                </el-form-item>
                <div class="login-btn" >
                    <div class="loginbtn" @click="submitLogin">登录</div>
                </div>
            
            </el-form>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">林云会数字经济研究院版权所有</div>
  </div>
</template>

<script>
import api from "@/api";
export default {
  data() {
    return {
      param: {
        username: "",
        password: ""
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      }
    };
  },
  created() {},
  methods: {
    submitLogin() {
      this.$refs.login.validate(valid => {
        if (valid) {
          this.submitLoginComfin();
        } else {
          return false;
        }
      });
    },

    //确定登录
    submitLoginComfin() {
      console.log("确定登录");
      var obj = {
        password: this.param.password,
        username: this.param.username
      };
      api
        .login(obj)
        .then(res => {
          if (res.code === 200) {
            this.$message.success("登录成功！");
            this.$router.push("/");
          } else {
            this.$alert(res.msg, "提示", {
              confirmButtonText: "确定",
              type: "warning"
            });
          }
        })
        .catch(err => {
          this.loading = false;
          this.$alert(err, "系统错误", {
            confirmButtonText: "确定",
            type: "error"
          });
        });
    }
  }
};
</script>

<style scoped>
.login-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url(../assets/images/20210121101615a9d4af6a15.png);
  background-size: 100%;
}
.ms-title {
  width: 100%;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  border-bottom: 1px solid #ddd;
}
.ms-login {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 350px;
  margin: -190px 0 0 -175px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.9);
  overflow: hidden;
}
.ms-content {
  padding: 30px 30px;
}
.login-btn {
  text-align: center;
  padding-top: 15px;
}
.login-btn button {
  width: 100%;
  height: 36px;
  margin-bottom: 10px;
}
.login-tips {
  font-size: 12px;
  line-height: 30px;
}
</style>